<!--
- Author:   .
- Date:    2018/1/11 0011.
- File:    search.
-->
<template>
  <div class="searchpage f-cb">
    <div class="SearchBox2">
      <div class="SearchBor xd hidden"><i class="iconfont icon-search lh70"></i>
        <input type="text" class="SearchInp pl80" placeholder="输入用户名或电话搜索" v-model="keyword" v-on:keyup.13="search">
        <button type="button" class="SearchBut" @click="search">搜索</button>
      </div>
    </div>
    <div class="searchclose" @click="cancleSearch">取消</div>
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false">
      <div class="sub_block" v-for="friend in friendList.data">
        <div class="block f-cb">
          <span class="fl w50b">姓名：{{friend.member_truename}}</span><span class="fl">电话：{{friend.member_mobile}}</span>
        </div>
        <div class="block f-cb"><span class="fl w50b">类型：{{friend.type | userLvTypeName}}</span>
          <div class="fl"><span class="pt5 disib">购买订单数：{{friend.order_num}}</span><router-link :to="{name: 'order-friend', query: {memberId: friend.member_id, userLv: friend.type}}" class="look">查看</router-link></div>
        </div>
        <div class="block f-cb"><span  class="fl w50b">订单金额：{{friend.order_amount}}</span><span class="fl w50b">贡献积分：<span class="cr_f83166">￥{{friend.freeze_balance}}</span></span>
        </div>
      </div>
    </div>
    <loading-more :allLoaded="friendList.allLoaded" :show="friendList.data.length > 0"></loading-more>
    <empty-data :show="friendList.allLoaded && friendList.data.length <= 0"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        keyword: '',
        friendList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        currentDate: new Date(),
        friendCount: {a: '', b: '', c: ''}

      }
    },
    created() {
    },
    watch: {
      selectUserLv: function (value) {
        this.selectUserLv = value
        this.initFriendList()
      }
    },
    methods: {
      cancleSearch() {
        this.keyword = ''
        this.friendList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.$router.go(-1)
      },
      search() {
        if (!this.keyword) {
          this.$toast('请输入用户名或电话搜索')
          return
        }
        this.initFriendList()
      },
      getFriendCount() {
        this.$request.getFriendCount().then(data => {
          this.friendCount = data
        })
      },
      initFriendList() {
        this.friendList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getFriendList(this.friendList.page, this.friendList.pageSize)
      },
      openDatePicker() {
        this.$refs.datePicker.open()
      },
      getFriendList(page, pageSize) {
        if (!this.keyword || this.keyword == '') {
          return
        }
        let params = {pageSize: pageSize, page: page, keyword: this.keyword}
        this.friendList.loading = true
        this.$request.getFriendList(params).then(data => {
          if (data.length < this.friendList.pageSize) {
            this.friendList.allLoaded = true
          }
          this.friendList.data = [...this.friendList.data, ...data]
        }).finally(() => {
          this.friendList.requested = true
          this.friendList.loading = false
        })
      },
      loadMore() {
        if (this.friendList.loading || this.friendList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getFriendList(++this.friendList.page, this.friendList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>